
<script>
    import 'css/tabpage.styl'
    import 'css/part'
    import axios from 'axios'

	export default{
        data(){
            return {
                data:{
                    newNotice:{list:[]},
                    newMsg:{list:[]},
                    recommend:{list:[]},
                    hotArticle:{list:[]},
                    commissionPlan:{list:[]},
                    bonus:{list:[]},
                    discounts:{list:[]},
                    regist:{list:[]}
                }
            }
        },
        created () {
            axios.get("static/data/hextra/index.json")
            .then((data)=>{
                
                this.data=data.data

                console.log(this.data)
            })
        }
	}
</script>


<template>
	<div class="htx-home pdp-100">

		<!-- 最新消息 -->
		<div class="htx-main clearfix">

			<!-- 最新公告 -->
			<aside class="htx-main-part">
           	 	
           	 	<div class="htx-main-part mb-20">
           	 		
					<header class="part-header part-header-bg">
							HTX中文网最新公告
					</header>
					<div class="part-content">
                        <router-link :to="{name:'htxArticle',query:{id:item.id,mdHref:item.markdownHref}}" v-for="item in data.newNotice.list" :key="item.id" class="part-content-link">
                            {{item.title}}
                        </router-link>
					</div>
           	 	</div>
           	 	<img src="../img/wechat.png"/>
			</aside>

			<!-- 最新消息 -->
			<div class="htx-main-part htx-main-part-center">
				<header class="part-header">
					<div class="part-header-slogan">
						最新消息
					</div>
				</header>
				<div class="part-content">
					
                    <router-link :to="{name:'htxArticle',query:{id:item.id,mdHref:item.markdownHref}}" v-for="item in data.newMsg.list" :key="item.id" class="part-content-link">
                        {{item.title}}
						<span class="link-time">{{item.time}}</span>
                    </router-link>
                    
				</div>
			</div>

			<!-- 精彩推荐 -->
			<aside class="htx-main-part">
				
           	 	<img src="../img/wechat.png" class="mb-20"/>
           	 	
				<div class="htx-main-part">
					
					<header class="part-header part-header-bg">
							最新精彩推荐
					</header>

                    
					<div class="part-content">
                        <router-link :to="{name:'htxArticle',query:{id:item.id,mdHref:item.markdownHref}}" v-for="item in data.recommend.list" :key="item.id" class="part-content-link">
                            {{item.title}}
                        </router-link>
						
					</div>
				</div>

			</aside>

		</div>

		<!-- 其他tab 主要页面 -->
		<div class="htx-abstract clearfix">

			<!-- tab摘要 -->
			<div class="clearfix">

				<!-- 注册流程 -->
				<div class="htx-abstract-tab">

					<header class="part-header">
						<div class="part-header-slogan">
							HTX注册流程
						</div>
					</header>
					<div class="part-content" >
						
                        <router-link :to="{name:'htxArticle',query:{id:item.id,mdHref:item.markdownHref}}" v-for="item in data.newNotice.list" :key="item.id" class="part-content-link">
                            {{item.title}}
                        </router-link>
					</div>
				</div>

				<!-- 佣金计划 -->
				<div class="htx-abstract-tab">

					<header class="part-header">
						<div class="part-header-slogan">
							HTX佣金计划
						</div>
					</header>
					<div class="part-content">
                        <router-link :to="{name:'htxArticle',query:{id:item.id,mdHref:item.markdownHref}}" v-for="item in data.newNotice.list" :key="item.id" class="part-content-link">
                            {{item.title}}
                        </router-link>
					</div>
				</div>

				<!-- 奖金制度 -->
				<div class="htx-abstract-tab">

					<header class="part-header">
						<div class="part-header-slogan">
							HTX奖金制度
						</div>
					</header>
					<div class="part-content">
                        <router-link :to="{name:'htxArticle',query:{id:item.id,mdHref:item.markdownHref}}" v-for="item in data.newNotice.list" :key="item.id" class="part-content-link">
                            {{item.title}}
                        </router-link>
					</div>
				</div>

				<!-- 优惠扶持 -->
				<div class="htx-abstract-tab">

					<header class="part-header">
						<div class="part-header-slogan">
							HTX优惠扶持
						</div>
					</header>
					<div class="part-content">
                        <router-link :to="{name:'htxArticle',query:{id:item.id,mdHref:item.markdownHref}}" v-for="item in data.newNotice.list" :key="item.id" class="part-content-link">
                            {{item.title}}
                        </router-link>
					</div>
				</div>

			</div>

			<!-- 热门文章 -->
			<div class="htx-abstract-hot">

				<header class="part-header part-header-bg">
						热门文章
				</header>
				<div class="part-content">
                    <router-link :to="{name:'htxArticle',query:{id:item.id,mdHref:item.markdownHref}}" v-for="item in data.newNotice.list" :key="item.id" class="part-content-link">
                        {{item.title}}
                    </router-link>
				</div>
			</div>

		</div>

	</div>
</template>

<style lang="stylus">
	@import "../css/variable.styl";
	.htx-home
		margin 40px 6%
		
	.htx-main
		padding 0 270px
		width 100%
		box-sizing border-box
		margin-bottom 20px
		
		&-part
			float left
			width 100%
			border $part-border
			&-center
				height 723px
	
	aside.htx-main-part
		width 250px
		border none
		&:first-child
			margin-left -270px
			
		&:last-child
			margin-right -270px
			float right
		.htx-main-part
			box-sizing border-box
	
	.htx-abstract
		padding-right: 270px
		&>div
			&:first-child
				float left
				width 100%
			&:last-child
				float right
				width 250px
				margin-right: -270px
				border 1px solid #D3D3D3
		
		&-tab
			float left	
			border $part-border
			width calc(50% - 10px)
			margin-bottom 20px
		
			&:nth-child(2n)
				float right
	
</style>